<template>
  <div id="home">
  	<!--home 下的子路由 children-->
  	 <router-view/>
	   <!-- <mt-spinner type="fading-circle" color="#26a2ff" :size="60" v-if="isLoading"></mt-spinner> -->
     	<ul 
		v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
     		>
     		<li v-for="movies in movieList" :key="movies.id" @click="toMovies(movies.id)">
     			<div class="middle-left block" >
     			<img  v-lazy="picFix(movies.img)"/>
     			</div>
     			<div class="Border">
     			<div class="middle block" >
     				<div class="middle-top">
     				<span>{{movies.nm}}</span><i v-if="movies.version== 'v3d imax' ">
     					<img src="../img/2dmax.png"/></i>
     				<i v-else><img src="../img/3dmax.png"/></i>
     				</div>
     				<div class="wish" v-if="movies.globalReleased==false" ><i>{{movies.wish}}</i>人想看</div>
     				<div class="dianpin" v-if="movies.sc==0" >暂无评分：</div>
     				<div class="dianpin" v-else >观众评分：<i>{{movies.sc}}</i></div>
     				<div class="star" >主演：{{movies.star}}</div>
     				<div class="showInfo" >{{movies.showInfo}}</div>
     		</div>
     		<div class="middle-right block goupiao" v-if="movies.globalReleased==true">购票</div>
     		<div class="middle-right block yushou" v-else="movies.globalReleased==false" >预售</div>
     		 <div class="cliearfix" ></div>
     		 </div>
     		</li>
     	</ul>

     
     
     


     
  </div>
</template>
<style lang="scss" scoped>
	img[lazy=loading]{
		width: 20px;
		height: 20px;
		margin: auto;
	}
</style>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',

  
  data(){
  	return{
  		movieList:[],i:12,j:24,mId:[],
		  loading:true,
		  isLoading:false,
  		

  	}
  },
  created(){
  	console.log(this.axios);
  	//http://m.maoyan.com  == /maoyan
  	
  	//方向代理
  	//请求  --》 本地服务器（webpack的deServer） --》猫眼的服务器
//	this.offset = this.$route.params.offset ;
   	 	this.axios.get('/ajax/movieOnInfoList').then((res)=>{
		console.log("正在热映",res)
		this.movieList=res.data.movieList
      this.$store.commit('changeHT','飞鱼电影')
      this.mId=res.data.movieIds
      console.log('电影id',this.mId)
      this.loading=false;
	})

  },
  methods:{
  	toAbout(){
  		console.log(this)



//		loadMore()

  },
  
   toMine(){
   	//跳转  动态路由     /mine/:userId      userId=1233
   	this.$router.push({path:'/mine/123'})
// 	this.$router.push({name:'mine',params:{userId:123}})
   },
   //修改图片尺寸
   picFix(url){
   	 return url.replace('w.h','128.180')
   },
   toMovies(id){
   	this.$router.push({name:'movie',params:{movieId:id}})
   },

   loadMore(){
   	console.log("到底了")
      var ids=[];  //用来装新增的   电影id
      for(this.i;this.i<this.j;this.i++){
      	if (this.mId[this.i]==undefined) {   //一开始万一是为空的数组的push方法，就会返回空，用不了，所以必须判断一下
      		break;
      	}else{
      		ids.push(this.mId[this.i])
      	}
      }
      ids=ids.toString()
      console.log('ids',ids)
      this.axios.get('/ajax/moreComingList',{
      	params:{
      		token:'',
      		movieIds:ids
      	}
      }).then((res)=>{
      	console.log('原来',this.movieList)
      	this.movieList=this.movieList.concat(res.data.coming)
		  console.log("改完的list",this.movieList)
		  this.isLoading=true;
      })
      this.j+=12;
   },
  
  }
}
</script>
